import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  View, Text, StyleSheet, Image, TouchableOpacity,DeviceEventEmitter
} from 'react-native'
import Layer from "src/components/Layer"
import NavBar from 'src/components/navBar'
import navigationhelper from 'src/components/navigationhelper'

export default class MakePlanSuccessView extends Component {
  constructor(props){
    super(props)
    const reserve_amount = this.props.navigation.getParam('reserve_amount')
    const bank_name = this.props.navigation.getParam('bank_name')
    const card_number = this.props.navigation.getParam('card_number')
    this.state = {
      card_number: card_number,
      reserve_amount: reserve_amount,
      bank_name: bank_name
    }
  }

  componentDidMount=()=>{
    Layer.hiddenLoading()
     DeviceEventEmitter.emit('refreshCardManager')
  }

  static propTypes = {
    bankName: PropTypes.string,
    amount: PropTypes.string
  }

  handleBackCardManager = () => {
    navigationhelper.goBack()
    navigationhelper.navigate('CardManager')
  }

  render () {
    return (
      <View style={styles.container}>
        <NavBar 
          title={'制定成功'}
          leftText={'卡管家'} 
          back={()=>{
            // navigationhelper.goBack()
            navigationhelper.navigate('CardManager')
          }}
          barStyle={'dark-content'}
          />
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Image style={styles.resultImage}
            source={require('src/assets/icon_success.png')} />
          <Text style={styles.resultText}>{'计划制定成功'}</Text>
          <Text style={styles.tipText}>
            {'请确保您的信用卡' + this.state.bank_name + this.state.card_number + '可用'}
          </Text>
          <Text style={styles.tipText}>
            {'额度至少为'}
            <Text style={{ color: '#ff2121' }}>
              {'￥' + this.state.reserve_amount}
            </Text>
          </Text>
        </View>
        <TouchableOpacity
          style={styles.btnContainer}
          onPress={this.handleBackCardManager}>
          <Text style={styles.btnText}>{'返回卡管家'}</Text>
        </TouchableOpacity>
        <View style={{ height: 16 }} />
      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  resultImage: {
    resizeMode: 'contain',
    marginTop: 50
  },
  resultText: {
    fontSize: 20,
    color: '#2e2e2e',
    fontWeight: 'bold',
    marginTop: 42
  },
  tipText: {
    fontSize: 13,
    color: '#8e8e93',
    marginTop: 8
  },
  btnContainer: {
    height: 50,
    marginLeft: 16,
    marginRight: 16,
    borderRadius: 5,
    backgroundColor: '#ff2121',
    alignItems: 'center',
    justifyContent: 'center'
  },
  btnText: {
    fontSize: 16,
    color: 'white',
    fontWeight: 'bold'
  }
})